<template>
	<div class="container">
		<!-- 添加 -->
		<el-dialog
			title="添加"
			:visible.sync="dialogVisibleAdd"
			width="30%"
			:show-close="false"
			@close="handleClose"
		>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="业务名" prop="SERVICESNAME">
					<el-input v-model="ruleForm.SERVICESNAME"></el-input>
				</el-form-item>
				<el-form-item label="所属部门" prop="SUPPORT">
					<el-input v-model="ruleForm.SUPPORT"></el-input>
				</el-form-item>
				<el-form-item label="业务状态">
					<el-radio-group
						v-model="STATUS"
						size="medium"
						:fill="STATUS == 'y' ? '#67C23A' : '#F56C6C'"
					>
						<el-radio-button key="y" label="y"
							>开启</el-radio-button
						>
						<el-radio-button key="n" label="n"
							>关闭</el-radio-button
						>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="REMARK">
					<el-input
						type="textarea"
						v-model="ruleForm.REMARK"
					></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm', 'add')"
					>确 定</el-button
				>
			</span>
		</el-dialog>

		<!-- 编辑 -->
		<el-dialog
			title="编辑"
			:visible.sync="dialogVisibleEdit"
			width="30%"
			@open="handleOpenEdit"
			:show-close="false"
			@close="handleCloseEdit"
		>
			<el-form
				:model="ruleFormEdit"
				:rules="rules"
				ref="ruleFormEdit"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="业务名" prop="SERVICESNAME">
					<el-input v-model="ruleFormEdit.SERVICESNAME"></el-input>
				</el-form-item>
				<el-form-item label="所属部门" prop="SUPPORT">
					<el-input v-model="ruleFormEdit.SUPPORT"></el-input>
				</el-form-item>
				<el-form-item label="业务状态">
					<el-radio-group
						v-model="STATUSEDIT"
						size="medium"
						:fill="STATUSEDIT == 'y' ? '#67C23A' : '#F56C6C'"
					>
						<el-radio-button key="y" label="y"
							>开启</el-radio-button
						>
						<el-radio-button key="n" label="n"
							>关闭</el-radio-button
						>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="备注" prop="REMARK">
					<el-input
						type="textarea"
						v-model="ruleFormEdit.REMARK"
					></el-input>
				</el-form-item>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleCloseEdit">取 消</el-button>
				<el-button
					type="primary"
					@click="submitForm('ruleFormEdit', 'edit')"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: ['title', 'dialogVisibleAdd', 'dialogData', 'dialogVisibleEdit'],
	computed: {
		STATUS: {
			get: function() {
				return this.ruleForm.SERVICESSTATUS === 1 ? 'y' : 'n';
			},
			set: function(value) {
				this.ruleForm.SERVICESSTATUS = value === 'y' ? 1 : 0;
			},
		},
		STATUSEDIT: {
			get: function() {
				return this.ruleFormEdit.SERVICESSTATUS === 1 ? 'y' : 'n';
			},
			set: function(value) {
				this.ruleFormEdit.SERVICESSTATUS = value === 'y' ? 1 : 0;
			},
		},
	},
	data() {
		return {
			ruleForm: {
				ID: '',
				SERVICESNAME: '',
				SUPPORT: '',
				REMARK: '',
				CREATEDATE: '',
				SERVICESSTATUS: '',
			},
			// diadata:{
			//     ID:this.dialogData.ID,
			//     SERVICESNAME:this.dialogData.SERVICESNAME,
			//     SUPPORT:this.dialogData.SUPPORT,
			//     REMARK:this.dialogData.REMARK,
			//     CREATEDATE:this.dialogData.CREATEDATE
			// },
			ruleFormEdit: {
				ID: '',
				SERVICESNAME: '',
				SUPPORT: '',
				REMARK: '',
				CREATEDATE: '',
				SERVICESSTATUS: '',
			},
			rules: {
				SERVICESNAME: [
					{
						required: true,
						message: '请输入业务名',
						trigger: 'blur',
					},
				],
				SUPPORT: [
					{
						required: true,
						message: '请输入所属部门',
						trigger: 'blur',
					},
				],
			},
		};
	},
	mounted() {},
	methods: {
		handleOpenEdit() {
			// this.ruleFormEdit = this.dialogData;
			for (const key in this.ruleFormEdit) {
				if (this.dialogData.hasOwnProperty(key)) {	
					this.ruleFormEdit[key] = this.dialogData[key];
				}	
				
			}
		},
		handleClose() {
			this.$emit('dialogCloseAdd');
		},
		handleCloseEdit() {
			this.$emit('dialogCloseEdit');
		},
		submitForm(formName, title) {
			// console.log(this.$refs[formName])
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log('succ');
					switch (title) {
						case 'edit':
							this.handleCloseEdit();
							break;

						case 'add':
							this.handleClose();
							break;
					}
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	},
};
</script>

<style>
</style>
